<template>
  <div class="page-container">
    <!-- 左侧列表区域 -->
    <div class="left-sidebar">
      <n-scrollbar>
        <div>
          <h3>左侧列表</h3>
          <ul>
            <li v-for="(item, index) in listItems" :key="index">{{ item }}</li>
          </ul>
        </div>
      </n-scrollbar>
    </div>
    <!-- 中间 Markdown 区域 -->
    <div class="markdown-section">
      <n-scrollbar>
        <div>
          <h3>Markdown 内容</h3>
          <div v-html="parsedMarkdown"></div>
        </div>
      </n-scrollbar>
    </div>
    <!-- 右侧聊天区域 -->
    <div class="chat-section">
      <n-scrollbar>
        <div class="chat-content">
          <h3>聊天区</h3>
          <div class="chat-messages">
            <div v-for="(message, index) in chatMessages" :key="index" :class="message.isMine? 'chat-message mine' : 'chat-message'">
              <div class="message-content">{{ message.text }}</div>
            </div>
          </div>
        </div>
        <div class="input-container">
          <n-input v-model:value="newMessage" placeholder="请输入消息"></n-input>
          <n-button @click="sendMessage">发送</n-button>
        </div>
      </n-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MarkdownIt from'markdown-it';
import MarkdownItKatex from'markdown-it-katex';
import 'katex/dist/katex.min.css';
import { NInput, NButton, NScrollbar } from 'naive-ui';

// 左侧列表数据
const listItems = ref([
  '列表项 1',
  '列表项 2',
  '列表项 3'
]);

// Markdown 解析相关
const md = new MarkdownIt().use(MarkdownItKatex);
const markdownContent = ref('### 这是一段示例 Markdown 内容\n包含数学公式：\\(E = mc^2\\)');
const parsedMarkdown = ref('');
parsedMarkdown.value = md.render(markdownContent.value);

// 聊天相关数据
const chatMessages = ref([
  // 初始消息示例
  { text: '你好，有什么可以帮到你？', isMine: false }
]);
const newMessage = ref('');

const sendMessage = () => {
  if (newMessage.value.trim()!== '') {
    // 模拟发送消息，先添加到聊天记录中
    chatMessages.value.push({ text: newMessage.value, isMine: true });
    // 这里可以添加调用 API 与机器人交互的逻辑，获取回复后再添加到聊天记录
    setTimeout(() => {
      chatMessages.value.push({ text: '这是机器人的回复', isMine: false });
    }, 1500);
    newMessage.value = '';
  }
};
</script>

<style scoped lang="less">
.page-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

.left-sidebar {
  width: 20%;
  background-color: #f4f4f4;
  padding: 20px;
}

.markdown-section {
  width: 50%;
  background-color: #ffffff;
  padding: 20px;
}

.chat-section {
  width: 30%;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  position: relative;
}

.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.chat-message {
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
}

.mine {
  background-color: #eee;
  // color: white;
  align-self: flex-end;
  margin-left:30%;
}

.input-container {
  display: flex;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: inherit;
}
</style>